<template>
    <div id="container">
        <div id="title">
            资产入库审核
        </div>
        <!-- 分割线 -->
        <el-divider></el-divider>
        <el-table
            :data="applyList.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
            style="width: 100%"
            >
            <el-table-column
                label="申请ID"
                prop="id"
                >
            </el-table-column>
            <el-table-column
                label="资产名称"
                prop="name"
                width="400px"
               >
            </el-table-column>
            <el-table-column
                label="资产类型"
                prop="type"
                >
                <template slot-scope="scope">
                    <el-tag>{{scope.row.type}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column
                align="right"
                >
                <template slot="header" slot-scope="scope">
                    <el-input
                    v-model="search"
                    size="mini"
                    placeholder="输入资产名搜索"
                    id="search-input"/>
                </template>
                <template slot-scope="scope">
                   <el-button type="primary" @click="handleViewDetail(scope.row)">查看详情</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 查看详情模态框 -->

        <el-dialog title="详情" :visible.sync="dialogVisible">
            <el-form :model="current" ref="detailForm">
                <el-form-item label="资产名称" :label-width="formLabelWidth" prop="name">
                    <el-input v-model="current.name" disabled></el-input>
                </el-form-item>
                <el-form-item label="版本号" :label-width="formLabelWidth" prop="version">
                    <el-input v-model="current.version" disabled></el-input>
                </el-form-item>
                <el-form-item label="资源类型" :label-width="formLabelWidth" prop="type">
                    <el-select v-model="current.type" disabled>
                        <el-option label="WORD文档" value="word"></el-option>
                        <el-option label="PPT演示文稿" value="ppt"></el-option>
                        <el-option label="EXCEL表格" value="excel"></el-option>
                        <el-option label="图片" value="photo"></el-option>
                        <el-option label="PDF文档" value="pdf"></el-option>
                        <el-option label="软件/程序/源代码" value="program"></el-option>
                        <el-option label="压缩包" value="compress"></el-option>
                        <el-option label="音频" value="audio"></el-option>
                        <el-option label="视频" value="video"></el-option>
                        <el-option label="TXT文本文档" value="txt"></el-option>
                        <el-option label="ISO镜像文件" value="iso"></el-option>
                        <el-option label="网页/URL" value="url"></el-option>
                        <el-option label="其他" value="unkown"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="资源描述" :label-width="formLabelWidth" prop="desc">
                    <el-input type="textarea" v-model="current.desc" disabled></el-input>
                </el-form-item>
                <el-form-item label="入库至" :label-width="formLabelWidth" prop="location">
                    <el-input v-model="current_location" disabled></el-input>
                </el-form-item>
                <el-form-item label="标签" :label-width="formLabelWidth" prop="tags">
                    <el-input v-model="current.tags" disabled></el-input>
                </el-form-item>
                <el-form-item label="下载链接" :label-width="formLabelWidth" prop="url">
                    <el-link type="primary" @click="download">点此下载</el-link>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="success" @click="handleCertificationPass">审核通过</el-button>
                <el-button type="danger" @click="handleCertificationFail">驳回</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import axios from 'axios';
export default {
    name:'Warehousing',
    data(){
        return{
            // 按用户名搜索
            search:'',
            // 审核申请列表
            applyList:[],
            dialogVisible:false,
            // 保存临时状态信息
            current:'',
            formLabelWidth: '120px',
            // 保存临时位置信息
            current_location:[]
        }
    },
    created:function(){
        this.getData();
    },
    methods:{
        async getData(){
            this.applyList = [];
            const headerConfig = { headers:
                { 'Content-Type': 'application/json' ,'x-auth-token': this.$store.state.login.token}
            };
            try{
                const res = await axios.get('/api/admin/warehousing',headerConfig);
                if(res.status!==200) return this.$message.error("请求失败，请检查网络设置！");
                if(res.data.res.ok === 1){
                    this.applyList = res.data.res.data;
                }
            }catch(e){
                console.log(e);
                this.$message.error("出错了！这不是您的问题，我们的工程师正在努力修复！");
            }
        },
        async getFileLocation(file_id){
            console.log("get file loaction working...");
            const headerConfig = { headers:
                { 'Content-Type': 'application/json' ,'x-auth-token': this.$store.state.login.token}
            };
            let post_data = {
                file_id:file_id
            }
            try{
                const res = await axios.post('/api/common/get_location',post_data,headerConfig);
                if(res.status!==200) return this.$message.error("请求失败，请检查网络设置！");
                if(res.data.res.ok === 1){
                    this.current_location = res.data.res.data.join(' → ');
                }
            }catch(e){
                console.log(e);
                this.$message.error("出错了！这不是您的问题，我们的工程师正在努力修复！");
            }
        },
        handleViewDetail:function(row){
            this.dialogVisible = true;
            this.current = row;
            this.getFileLocation(this.current.id);
        },
        handleCertificationPass:async function(){
            let post_data = {
                file_id:this.current.id,
                name:this.current.name,
                type:'success',
                uid:this.current.uid
            }
            const headerConfig = { headers:
                { 'Content-Type': 'application/json' ,'x-auth-token': this.$store.state.login.token}
            };
            try{
                const res = await axios.post('/api/admin/certification_pass',post_data,headerConfig);
                if(res.status!==200) return this.$message.error("请求失败，请检查网络设置！");
                if(res.data.res.ok === 1){
                    this.$notify({
                        title: '提示',
                        message: res.data.res.msg,
                        type: 'success'
                    });
                }else{
                    this.$notify({
                        title: '提示',
                        message: res.data.res.msg,
                        type: 'error'
                    });
                }
            }catch(e){
                console.log(e);
                this.$message.error("出错了！这不是您的问题，我们的工程师正在努力修复！");
            };
            this.dialogVisible = false;
            this.$router.go(0);
        },
        handleCertificationFail:async function(){
            let post_data = {
                file_id:this.current.id,
                name:this.current.name,
                type:'fail',
                uid:this.current.uid
            }
            const headerConfig = { headers:
                { 'Content-Type': 'application/json' ,'x-auth-token': this.$store.state.login.token}
            };
            try{
                const res = await axios.post('/api/admin/certification_pass',post_data,headerConfig);
                if(res.status!==200) return this.$message.error("请求失败，请检查网络设置！");
                if(res.data.res.ok === 1){
                    this.$notify({
                        title: '提示',
                        message: res.data.res.msg,
                        type: 'success'
                    });
                }else{
                    this.$notify({
                        title: '提示',
                        message: res.data.res.msg,
                        type: 'error'
                    });
                }
            }catch(e){
                console.log(e);
                this.$message.error("出错了！这不是您的问题，我们的工程师正在努力修复！");
            };
            this.dialogVisible = false;
            this.$router.go(0);
        },
        // 资源下载
        download:async function(){
            let filename = this.current.path.split('\\');
            filename = filename[1];
            
            let post_data = {
                file_id:this.current.id,
                path:this.current.path,
                filename:filename,
                originalname:this.current.originalname
            }
            console.log(post_data);
            try{
                const res = await axios.post('/api/file_download/download_single',post_data,{responseType: 'blob'});
                if(res.status!==200) return this.$message.error("请求失败，请检查网络设置！");
                console.log(res);
                const { data, headers } = res
                const fileName = headers['content-disposition'].replace(/\w+;filename=(.*)/, '$1')
                // 此处当返回json文件时需要先对data进行JSON.stringify处理，其他类型文件不用做处理
                //const blob = new Blob([JSON.stringify(data)], ...)
                const blob = new Blob([data],{type: headers['content-type']})
                let dom = document.createElement('a')
                let url = window.URL.createObjectURL(blob)
                dom.href = url
                dom.download = decodeURI(fileName)
                dom.style.display = 'none'
                document.body.appendChild(dom)
                dom.click()
                dom.parentNode.removeChild(dom)
                window.URL.revokeObjectURL(url)
            }catch(e){
                console.log(e);
                // this.$message.error("出错了！这不是您的问题，我们的工程师正在努力修复！");
            }
        }
    }
}
</script>

<style lang="scss" scoped>
#container{
    background-color: #fff;
    #title{
        font-size: 20px;
        font-weight: bold;
    }
}
</style>